<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style type="text/css">
@keyframes lds-spinner {0%{opacity:1;}100% {opacity:0;}}
@-webkit-keyframes lds-spinner {0% {opacity:1;}100% {opacity: 0;}}
.lds-css {position:fixed; top:0;left:0;width: 100vw; height: 100vh;background-color: rgba(0,0,0,.1);z-index:9999;}
/*filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;*/
.lds-spinner {position: relative;}
.lds-spinner div {
  left: 60px;top: 0px;position: absolute;
  -webkit-animation: lds-spinner linear 1.5s infinite;
  animation: lds-spinner linear 1.5s infinite;
  background: #e4393c;
  width: 12px;height: 38px;border-radius: 58%;
  -webkit-transform-origin: 6px 55px;
  transform-origin: 6px 55px;
}
.lds-spinner div:nth-child(1) {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-animation-delay: -1.48s;
  animation-delay: -1.48s;
}
.lds-spinner div:nth-child(2) {
  -webkit-transform: rotate(36deg);
  transform: rotate(36deg);
  -webkit-animation-delay: -1.24s;
  animation-delay: -1.24s;
}
.lds-spinner div:nth-child(3) {
  -webkit-transform: rotate(72deg);
  transform: rotate(72deg);
  -webkit-animation-delay: -0.96s;
  animation-delay: -0.96s;
}
.lds-spinner div:nth-child(4) {
  -webkit-transform: rotate(108deg);
  transform: rotate(108deg);
  -webkit-animation-delay: -0.88s;
  animation-delay: -0.88s;
}
.lds-spinner div:nth-child(5) {
  -webkit-transform: rotate(144deg);
  transform: rotate(144deg);
  -webkit-animation-delay: -0.74s;
  animation-delay: -0.74s;
}
.lds-spinner div:nth-child(6) {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-animation-delay: -0.62s;
  animation-delay: -0.62s;
}
.lds-spinner div:nth-child(7) {
  -webkit-transform: rotate(216deg);
  transform: rotate(216deg);
  -webkit-animation-delay: -0.54s;
  animation-delay: -0.54s;
}
.lds-spinner div:nth-child(8) {
  -webkit-transform: rotate(252deg);
  transform: rotate(252deg);
  -webkit-animation-delay: -0.46s;
  animation-delay: -0.46s;
}
.lds-spinner div:nth-child(9) {
  -webkit-transform: rotate(288deg);
  transform: rotate(288deg);
  -webkit-animation-delay: -0.28s;
  animation-delay: -0.28s;
}
.lds-spinner div:nth-child(10) {
  -webkit-transform: rotate(324deg);
  transform: rotate(324deg);
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
.lds-spinner {
  width: 120px !important;
  height: 120px !important;
  left:50%;
  top:38%;
  transform: translate(-50%,-50%);
}
</style>
<head>
<body>
<!-- <div id ="loadDiv" class="lds-css">
<div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>
</div> -->
<script>
	function LoadingShow(){
		var html='<div class="lds-spinner"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div>';
    var load=document.createElement("div");
    load.innerHTML=html,load.id="loadDiv",load.className="lds-css";
    var old=document.body.children[0];
    document.body.insertBefore(load,old);
	}
  function loadingHide(){
    var load=document.getElementById("loadDiv");
    load.parentNode.removeChild(load)
  }
  LoadingShow();
  setTimeout(loadingHide,3000)
</script>
</body>
